import NotData from '@/components/NotData';
import DonutPieChart from '../components/DonutPieChart';
import { Skeleton } from 'antd';
import { SvgIcon } from '@/components/icon';
import { ArrowRightOutlined } from '@ant-design/icons';
import { Tooltip, Button } from '@/components/eai-design';
interface ExpiredProps {
  expiredData: {
    expiredCount: number;
    expiredPercent: number;
    normalPercent: number;
    prevExpiredPercent: number;
  };
  statisticsLoading: boolean;
  tooltipMap: Record<string, string>;
  activeRange: string;
  onShowDetail: () => void;
}

const expired = ({
  expiredData,
  statisticsLoading,
  tooltipMap,
  activeRange,
  onShowDetail,
}: ExpiredProps) => {
  return (
    <div
      className="w-1/3 rounded-default p-4 "
      style={{ backgroundColor: '#fff', position: 'relative', zIndex: 1, minWidth: '500px' }}
    >
      <div className="flex h-[40px] items-center justify-between  ">
        <div className="flex items-center text-xl font-semibold">
          <div className="mr-2 h-3 w-3  rounded-full border-[3px] border-[#1B6DFA]"></div>
          文档新鲜度
          <Tooltip title={tooltipMap['documentFresh']}>
            <div className="flex">
              <SvgIcon size={16} icon="report-is1" className="ml-1" />
            </div>
          </Tooltip>
        </div>
        {(expiredData.expiredPercent !== 0 || expiredData.normalPercent !== 0) && (
          <Button type="text" onClick={onShowDetail}>
            详情
            <ArrowRightOutlined />
          </Button>
        )}
      </div>
      {(expiredData.expiredPercent !== 0 || expiredData.normalPercent !== 0) && (
        <div className=" my-2 flex items-center justify-between gap-4">
          <div className="  h-[98px] w-full  rounded-md     bg-fill-1 p-4  py-2  text-text-4 ">
            <div className="flex items-center text-sm ">
              <SvgIcon size={16} icon="report-is-expired" className="mr-1" />
              新鲜度
            </div>
            <div className="my-1">
              <span className="mr-1 text-2xl font-extrabold text-text-5">
                {expiredData.normalPercent}%
              </span>
            </div>
            <div className="flex items-center">
              <span className="text-sm text-text-4">
                {expiredData.expiredCount}个文档即将在
                {activeRange === '7days' ? ' 本周' : activeRange === '30days' ? '本月' : ''}
                过期
              </span>
            </div>
          </div>
        </div>
      )}
      <div className="mt-2">
        {statisticsLoading ? (
          <Skeleton active paragraph={{ rows: 5 }} style={{ padding: '10px' }} />
        ) : (
          <div>
            {expiredData.expiredPercent !== 0 || expiredData.normalPercent !== 0 ? (
              <DonutPieChart
                expiredPercent={expiredData.expiredPercent}
                normalPercent={expiredData.normalPercent}
                prevExpiredPercent={expiredData.prevExpiredPercent}
                height={180}
                expiredLabel="即将过期"
                normalLabel="常规"
                prevExpiredLabel="过期"
              />
            ) : (
              <div className="h-[260px]">
                <NotData />
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};
export default expired;
